<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				margin: 50px auto;
				width: 1200px;
				height: 360px;
				display: flex;
				justify-content: space-evenly;
				/* transform-style: preserve-3d; */
				
			}
			.inner {
				width: 360px;
				height: 100%;
				position: relative;
				perspective: 1200px;
				/* transform-style: preserve-3d;
				transform: perspective(900px) ; */
			}
			.msg,.pic {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: 1s;
				
			}
			.msg {
				background-color: rgba(0,0,0,.5);
				color: white;
				font-size: 20px;
				transform: rotateY(90deg);
			}
			.pic img {
				width: 100%;
			}
			.inner:hover .pic {
				transform: rotateY(-90deg);
			}
			.inner:hover .msg {
				transform: rotateY(0deg);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				<div class="pic">
					<img src="../../img/1.jpg" alt="">
				</div>
				<div class="msg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi qui ad praesentium dicta officia repellat! Nesciunt laboriosam ipsam vitae fugiat iste molestiae culpa ipsum quisquam esse dolores id error magni!</p>
				</div>
			</div>
			<div class="inner">
				<div class="pic">
					<img src="../../img/1.jpg" alt="">
				</div>
				<div class="msg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi qui ad praesentium dicta officia repellat! Nesciunt laboriosam ipsam vitae fugiat iste molestiae culpa ipsum quisquam esse dolores id error magni!</p>
				</div>
			</div>
			<div class="inner">
				<div class="pic">
					<img src="../../img/1.jpg" alt="">
				</div>
				<div class="msg">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi qui ad praesentium dicta officia repellat! Nesciunt laboriosam ipsam vitae fugiat iste molestiae culpa ipsum quisquam esse dolores id error magni!</p>
				</div>
			</div>
		</div>
	</body>
</html>
